<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">路线：</span>
        <el-select size="mini" v-model="params.form_to" placeholder="选择路线">
          <el-option label="中关村校区-良乡校区" value="中关村校区-良乡校区"></el-option>
          <el-option label="良乡校区-中关村校区" value="良乡校区-中关村校区"></el-option>
          <el-option label="中关村校区-西山校区" value="中关村校区-西山校区"></el-option>
          <el-option label="西山校区->中关村校区" value="西山校区->中关村校区"></el-option>
          <el-option label="中关村校区-回龙观" value="中关村校区-回龙观"></el-option>
          <el-option label="回龙观-中关村校区" value="回龙观-中关村校区"></el-option>
          <el-option label="中关村校区-房山分校阎村" value="中关村校区-房山分校阎村"></el-option>
          <el-option label="房山分校阎村-中关村校区" value="房山分校阎村-中关村校区"></el-option>
          <el-option label="良乡校区-回龙观" value="良乡校区-回龙观"></el-option>
          <el-option label="回龙观-良乡校区" value="回龙观-良乡校区"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.week_day"
          type="date"
          placeholder="选择周"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <el-button @click="getBusDateChart" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <common-chart class="common-chart center-search" chart-type="bar" size="big" :data="chart"></common-chart>
  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'BusChart',
  data () {
    return {
      option: {
        type: 1
      },
      params: {
        form_to: null,
        week_day: null
      },
      data: [],
      chart: {
        name: '班车预约统计',
        title: '',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      }
    }
  },
  components: {
    CommonChart
  },
  created () {
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    selectBuild (item) {
      const index = this.params.builde_id.indexOf(item.value)
      if (index > -1) {
        this.params.builde_id.splice(index, 1)
      } else {
        this.params.builde_id.push(item.value)
      }
    },
    async getBusDateChart () {
      const self = this
      if (!this.params.form_to) {
        this.$message.warning('请选择班车路线')
        return
      }
      if (!this.params.week_day) {
        this.$message.warning('请选择时间')
        return
      }
      const params = {
        week_day: this.$moment(this.params.week_day).format('YYYY-MM-DD'),
        form_to: this.params.form_to
      }
      const res = await portal.getBusDateChart(params)
      if (res.data) {
        const data = res.data
        self.chart.legend = ['总人数', '学生', '教职工']
        self.chart.xAxis = [
          { data: data.map(ele => ele.time) }
        ]
        self.chart.series = [
          {
            name: '总人数',
            type: 'bar',
            barWidth: '16%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.total)
          },
          {
            name: '学生',
            type: 'bar',
            barWidth: '16%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.stu)
          },
          {
            name: '教职工',
            type: 'bar',
            barWidth: '16%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.tea)
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
